<template>
	<div class="loginPage">
		<div class="topTitle flex" style="justify-content: initial;">
				<a href="javascript:;" class="return" @click="back"></a>
				<span class="login-tips" style="margin-left: 7.5rem;">忘记密码</span>
		</div>
		<div class="cont">
			<ul class="loginForm-ul">
				<li><div class="formfile fix"><i class="icon icon-phone" style="margin-top: 0.75rem;"></i> <input type="text" placeholder="手机号" id="phone" v-model="forget.phone"></div></li>
				<li><div class="formfile flex" style="align-items: center;"><i class="icon icon-code" style="margin-top: 0;"></i> <input type="text" placeholder="短信验证码" id="code" v-model="forget.code" style="flex: 1;"><div class="fl" style="line-height: 1.75rem;flex:1;padding: 0 0.62rem;height: 1.75rem;border-left: 1px solid #dbdbdb;"><a href="javascript:;" class="send-code" @click="sendMessage" :class="{'disabled':sendTipsMessage !== '获取验证码'}">{{sendTipsMessage}}</a></div></div></li>
				<li class="showPswli"><div class="formfile fix"><i class="icon2"></i> <input :type="pwdType" placeholder="密码" id="register-password" v-model="forget.password"><span class="eyes" @click="showPwd" :class="{'no-eyes':this.pwdType === 'text'}"></span></div></li>
				<li class="showPswli"><p class="error_msg" v-show="errorMsg">{{errorMsg}}</p><div class="formfile fix"><i class="icon2"></i> <input :type="confirmPwdType" placeholder="确认密码" id="register-confirm-password" v-model="forget.password_confirmation"><span class="eyes" @click="showConfirmPwd" :class="{'no-eyes':this.confirmPwdType === 'text'}"></span></div></li>
			</ul>
			<div id="captcha"></div>
			<div class="btn"><a href="javascript:;" @click="resetPassword">确定</a></div>
		</div>
	</div>
</template>

<script>
		import {sendMsg,resetPassword} from '@/api/login'
		export default{
			name:'forgetPaddword',
			metaInfo: {
			  title: '1234tv忘记密码',
				meta: [{
			    name: 'keywords',
			    content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
			  },{
					name: 'description',
					content: '专注互联网财经视频直播服务，致力为金融行业从业者、投资者、财经院校师生提供专业、综合性互联网财经直播服务平台。'
				}],
			},
			data(){
				return{
					forget:{
						phone:'',
						code:'',
						password:'',
						password_confirmation:'',
						NECaptchaValidate:''
					},
					pwdType:'password',
					confirmPwdType:'password',
					errorMsg:'',
					sendTipsMessage:'获取验证码',
					sendSecond:0
				}
			},
			creatd(){
				this.captchaIns = null
			},
			methods:{
				back(){
					this.$router.go(-1)
				},
				showPwd(){
					if(this.pwdType === 'password'){
						this.pwdType = 'text'
					}else{
						this.pwdType = 'password'
					}
				},
				showConfirmPwd(){
					if(this.confirmPwdType === 'password'){
						this.confirmPwdType = 'text'
					}else{
						this.confirmPwdType = 'password'
					}
				},
				sendMessage(){
					if(this.errorMsg === '请输入手机号' || this.errorMsg === '请填写正确的手机号'){
						return false
					}
					if(this.forget.phone === ''){
						this.errorMsg = '请输入手机号'
						return false
					}
					if(this.sendSecond === 0){
						if(this.captchaIns){
							this.captchaIns.verify()
						}
					}else{
						return false
					}
				},
				resetPassword(){
					if(this.errorMsg){
						return false
					}
					if(this.forget.phone === '' || this.forget.code === '' || this.forget.password === '' || this.forget.password_confirmation === ''){
						this.errorMsg = '手机号、短信验证码、密码、确认密码必须填写!'
						return false
					}
					resetPassword(this.forget).then(res=>{
						if(res.code === 0){
							let index = this.$layer.msg(res.message)
							setTimeout(()=>{
								this.$layer.close(index)
								this.$router.push('/login')
							},2000)
						}
					}).catch(err=>{
						console.log(err)
					})
				}
			},
			watch:{
				'forget.phone':function(val){
					if(val.length === 0){
						this.errorMsg = '请输入手机号'
					}else{
						if(!new RegExp("^((13[0-9])|(15[0-9])|(18[0-9])|14[0-9]|17[0-9])[0-9]{8,8}$").test(val)){
							this.errorMsg = '请填写正确的手机号'
						}else{
							this.errorMsg = ''
						}
					}
				},
				'forget.code':function(val){
					if(val.length === 0){
						this.errorMsg = '请输入短信验证码'
					}else{
						this.errorMsg = ''
					}
				},
				'forget.password':function(val){
					if(val.length === 0){
						this.errorMsg = '请输入密码'
					}else{
						if(val.length<6){
							this.errorMsg = '密码长度至少6位'
						}else if(this.forget.password_confirmation){
							if(this.forget.password_confirmation !== val){
								this.errorMsg = '确认密码和密码不一致'
							}else{
								this.errorMsg = ''
							}
						}else{
							this.errorMsg = ''
						}
					}
				},
				'forget.password_confirmation':function(val){
					if(val.length === 0){
						this.errorMsg = '请输入确认密码'
					}else{
						if(val.length<6){
							this.errorMsg = '确认密码长度至少6位'
						}else if(this.forget.password){
							if(this.forget.password !== val){
								this.errorMsg = '确认密码和密码不一致'
							}else{
								this.errorMsg = ''
							}
						}else{
							this.errorMsg = ''
						}
					}
				}
			},
			mounted(){
				let that = this;
				initNECaptcha({
						element: '#captcha',
						captchaId: 'b280b14b93ba4e2c9cf3d25a922cd0ab',
						mode: 'bind',
						onVerify: (err,res)=>{
							if(!err){
								this.forget.NECaptchaValidate = res.validate
								sendMsg({phone:this.forget.phone,NECaptchaValidate:this.forget.NECaptchaValidate}).then(res=>{
									if(res.code === 0){
										this.$layer.msg(res.message)
										this.sendTipsMessage = '(60)重新发送'
										let timer = setInterval(()=>{
											this.sendSecond++
											this.sendTipsMessage = '('+(60-this.sendSecond)+')重新发送'
											if(this.sendSecond === 60){
												this.sendTipsMessage = '获取验证码'
												clearInterval(timer)
												this.sendSecond = 0
												timer = null
											}
										},1000)
									}
								}).catch(err=>{
									console.log(err)
									this.captchaIns.refresh()
								})
							}
						}
				}, function (instance) {
						// 初始化成功后得到验证实例instance，可以调用实例的方法
						that.captchaIns = instance
				}, function (err) {
						// 初始化失败后触发该函数，err对象描述当前错误信息
				})
			}
		}
</script>

<style>
</style>
